<template>
  <div class="aliali-user-center">
    <el-container class="main-container">
      <!-- 侧边栏 -->
      <el-aside width="240px" class="sidebar">
        <user-profile-card :user="userData" />
        <el-menu 
          class="side-menu" 
          :default-active="$route.path"
          router
        >
          <el-menu-item index="/user/profile" :route="{name: 'UserProfile'}">
            <el-icon><User /></el-icon>个人主页
          </el-menu-item>
          <el-menu-item index="/user/settings" :route="{name: 'UserSettings'}">
            <el-icon><Setting /></el-icon>账号设置
          </el-menu-item>
          <el-menu-item index="/user/favorites" :route="{name: 'UserFavorites'}">
            <el-icon><Star /></el-icon>我的收藏
          </el-menu-item>
          <el-menu-item index="/user/following" :route="{name: 'UserFollowing'}">
            <el-icon><View /></el-icon>我的关注
          </el-menu-item>
          <el-menu-item index="/user/recommend" :route="{name: 'UserRecommend'}">
            <el-icon><Position /></el-icon>推荐关注
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { User, Setting, Star, View, Position } from '@element-plus/icons-vue'
import UserProfileCard from "@/components/personalCenter/UserProfileCard.vue"
import { getUserFromLocalStorage, initializeUserInLocalStorage } from '@/utils/localStorageUser'

const userData = ref({
  username: '用户名',
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  description: '这个人很懒，什么都没有写',
  stats: {
    dynamic: 0,
    following: 0,
    followers: 0
  }
})

// 从 localStorage 加载用户信息
onMounted(() => {
  const userInfo = getUserFromLocalStorage()
  if (userInfo) {
    userData.value = {
      ...userInfo,
      stats: {
        dynamic: userInfo.stats?.dynamic || 0,
        following: userInfo.stats?.following || 0,
        followers: userInfo.stats?.followers || 0
      }
    }
  } else {
    // 如果没有用户数据，初始化默认数据
    const defaultUser = initializeUserInLocalStorage()
    userData.value = {
      ...defaultUser,
      stats: {
        dynamic: defaultUser.stats?.dynamic || 0,
        following: defaultUser.stats?.following || 0,
        followers: defaultUser.stats?.followers || 0
      }
    }
  }
})
</script>

<style scoped>
.aliali-user-center {
  height: 100vh;
  background-color: #f4f4f4;
}
.main-header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}
.logo {
  font-size: 20px;
  font-weight: bold;
  color: #00a1d6;
}
.nav-menu {
  border-bottom: none;
}
.user-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}
.main-container {
  max-width: 1200px;
  margin: 20px auto;
  gap: 20px;
}
.sidebar {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}
.side-menu {
  border: none;
  margin-top: 20px;
}
.main-content {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  min-height: 600px;
}
</style>